<!DOCTYPE html>
<html>
<head>
  <title>iframe sandbox</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: system-ui, -apple-system, sans-serif;
      padding: 20px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .container {
      display: flex;
      gap: 20px;
      margin-bottom: 20px;
    }

    @media (max-width: 768px) {
      .container {
        flex-direction: column;
      }
    }

    .editor {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .preview {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    textarea {
      width: 100%;
      height: 400px;
      font-family: monospace;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      resize: vertical;
    }

    iframe {
      width: 100%;
      height: 400px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }

    .controls {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 10px;
    }

    .checkbox-group {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    button {
      padding: 8px 16px;
      background: #0070f3;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    button:hover {
      background: #0051a2;
    }

    label {
      user-select: none;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="editor">
      <h3>iframe sandbox</h3>
      <textarea id="codeEditor"></textarea>
      <button id="updatePreview">Update Preview</button>
    </div>
    
    <div class="preview">
      <iframe id="preview"></iframe>
      Sandbox controls
      <div class="controls" id="sandboxControls"></div>
    </div>
  </div>

  <script>
    // Default HTML template
    const defaultHtml = `<!DOCTYPE html>
<html>
<head>
  <style>
    .output {
      margin: 20px;
      padding: 10px;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <input type="text" id="userInput" placeholder="Type something...">
  <div class="output" id="output">Output will appear here</div>

  <script>
    const input = document.getElementById('userInput');
    const output = document.getElementById('output');
    
    input.addEventListener('input', (e) => {
      output.textContent = e.target.value;
    });
  <\/script>
</body>
</html>`;

    // Sandbox options
    const sandboxOptions = [
      { value: 'allow-forms', label: 'Forms' },
      { value: 'allow-modals', label: 'Modals' },
      { value: 'allow-orientation-lock', label: 'Orientation Lock' },
      { value: 'allow-pointer-lock', label: 'Pointer Lock' },
      { value: 'allow-popups', label: 'Popups' },
      { value: 'allow-popups-to-escape-sandbox', label: 'Popups Escape Sandbox' },
      { value: 'allow-presentation', label: 'Presentation' },
      { value: 'allow-same-origin', label: 'Same Origin' },
      { value: 'allow-scripts', label: 'Scripts' },
      { value: 'allow-top-navigation', label: 'Top Navigation' }
    ];

    // Get DOM elements
    const codeEditor = document.getElementById('codeEditor');
    const preview = document.getElementById('preview');
    const updatePreviewBtn = document.getElementById('updatePreview');
    const sandboxControls = document.getElementById('sandboxControls');

    // Set initial editor content
    codeEditor.value = defaultHtml;

    // Create sandbox checkboxes
    sandboxOptions.forEach(option => {
      const div = document.createElement('div');
      div.className = 'checkbox-group';
      
      const checkbox = document.createElement('input');
      checkbox.type = 'checkbox';
      checkbox.id = option.value;
      checkbox.checked = option.value === 'allow-scripts'; // Enable scripts by default
      
      const label = document.createElement('label');
      label.htmlFor = option.value;
      label.textContent = option.label;
      
      div.appendChild(checkbox);
      div.appendChild(label);
      sandboxControls.appendChild(div);
    });

    // Update preview function
    function updatePreview() {
      const checkedOptions = Array.from(sandboxControls.querySelectorAll('input:checked'))
        .map(input => input.id)
        .join(' ');
      
      preview.setAttribute('sandbox', checkedOptions);
      preview.srcdoc = codeEditor.value;
    }

    // Event listeners
    updatePreviewBtn.addEventListener('click', updatePreview);
    sandboxControls.addEventListener('change', updatePreview);

    // Initial preview
    updatePreview();
  </script>
</body>
</html>
